<template>
    <div class="mui-card">
        <div class="mui-card-header">{{ goods.title }}</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner goods_description">
                <span v-for="(item, index) in goods.description" :key="index">
                    {{ item }}
                </span>
            </div>
        </div>
        <div class="mui-card-footer">
            <img v-lazy="goods.img_url" :alt="goods.title">
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.params.id,
      goods: {}
    };
  },
  created() {
    this.getGoods();
  },
  methods: {
    getGoods() {
      this.$http.get("getgoods?id=" + this.id).then(result => {
        if (result.status === 200 && result.body.length === 1)
          this.goods = result.body[0];
        else Toast("获取商品信息失败");
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.mui-card {
  .mui-card-header {
    color: #226aff;
  }
  .goods_description {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .mui-card-footer img {
    width: 100%;
  }
}
</style>

